<template>
  <div class="chartContent">
    <div id="myChart" ref="chartRef" style="width: 100%; height: 90%;"></div>
  </div>
</template>

<script setup>
import {markRaw, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
import * as echarts from 'echarts';
import {useMenuList} from '@/pinia/menu.js'
import {debounce} from 'lodash'

const props = defineProps({
  chartData: Array
})

let chartData = ref([])
const chartRef = ref()
const chartInit = ref()

// 获取图形数据
const getChartData = () => {
  let legend = []
  let color = []
  let keDu = []
  const newResult = []
  chartData.value.forEach((item, index) => {
    keDu.push(item.name)
    color.push(['rgba(255, 228, 138, 1)', 'rgba(255, 150, 46, 1)'][index % 2])
    legend.push({
      name: item.name,
      textStyle: {},
    })
    // 柱子 style
    newResult.push({
      data: [],
      name: item.name,
      type: 'bar',
      barWidth: '28px',
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: ['rgba(255, 228, 138, 1)', 'rgba(255, 150, 46, 1)'][index % 2]
      }
    },)
  })
  // 柱子 数据
  newResult.forEach((item, index) => {
    chartData.value.forEach((e, i) => {
      index === i ? item.data.push(e['value']) : item.data.push(0)
    })
  })
  // console.log('newResult', newResult)
  drawChart(legend, newResult, color, keDu)
}

const drawChart = (legend, newResult, color, keDu) => {
  chartInit.value = markRaw(echarts.init(chartRef.value))
  let option = {
    color: color,
    tooltip: {
      trigger: 'item',
      // formatter: '{a} <br/>{b} : {c} ({d}%)',  //提示框的内容
      formatter: function (params) {
        return `<span style="display:inline-block;margin-right:5px;width:8px;height:8px;background-color:${params.color};"></span>
                <span style="font-size: 12px;font-weight: 400;color: rgba(0, 0, 0, 1);">
                    ${params['name']}
                </span>
                <span style="font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, 1);">
                     ${params['value']}个
                </span>`
      },  //提示框的内容
      // position: function(p){ //提示框的位置，随鼠标hover的位置进行改变
      //   return [p[0] + 10,p[1] - 10]
      // },
      // extraCssText: 'width:180px;height:60px'  //提示框的大小
    },
    grid: {
      left: '0',
      right: '0',
      top: '30',
      bottom: '40',
      containLabel: true,
    },
    legend: {
      x: 'center',
      y: 'bottom',
      icon: 'circle',
      data: legend
    },
    xAxis: {
      type: 'category',
      data: keDu, // 横轴刻度
      show: false,
      axisPointer: {
        type: 'shadow',
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '',
      // min: 0,
      // max: 900,
      // interval: 200,
      axisLabel: {
        formatter: '{value}'
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: newResult
  };

  chartInit.value.setOption(option, true);
}

watch(() => props.chartData, (newVal, oldVal) => {
  chartData.value = props.chartData.map(item => {
    return {
      id: item.id,
      name: item.tagName,
      value: item.count * 1,
    }
  })
  nextTick(() => {
    getChartData()
  })
}, { immediate: true })


onMounted(() => {
  window.addEventListener('resize', resize)
})

const resize = () => {
  chartInit.value && debounce(chartInit.value.resize.bind(), 300)({
    animation: {
      duration: 700,
      easing: 'linear',
    }
  })
}

watch(() => useMenuList().collapseStatus, (newVal, oldVal) => {
  nextTick(() => resize())
})

onUnmounted(() => {
  chartInit.value && chartInit.value.dispose()
  chartInit.value = null
  window.removeEventListener('resize', () => resize())
})
</script>

<style lang="scss" scoped>
.chartContent {
  width: 100%;
  height: 100%;
}
</style>
